//API详情列表数据
//获取元素
let atteTimes=document.querySelector('.atte-times')
let price=document.querySelector('.price')
let atteUnitPrice=document.querySelector('#unitPrice')

function renderAtteData(){
    let data = [
        {"count": 4000, "price": 1200, "unitPrice": "0.3000"},
        {"count": 8000, "price": 2000,"unitPrice": "0.2500" },
        {"count": 40000, "price": 8000, "unitPrice": "0.2000" }
       ]
    
    let atteData=''
    
    data.forEach(function(v,i){
        atteData+=`
            <span class="${i===0?'atte-active2':''}" data-price="${v.price}" data-unit-price="${v.unitPrice}">${v.count}次</span>
        `
    })
    atteTimes.innerHTML=atteData
}
renderAtteData()

/* 
    需求 点击atte-times下的列表 改变atte-price中的价格和单价  事件委派
        还需要切换类名
*/

atteTimes.addEventListener('click',function(e){
    if(e.target.nodeName === 'SPAN'){
        price.textContent='￥'+e.target.dataset.price;
        atteUnitPrice.textContent=`(约${e.target.dataset.unitPrice}元/次),限企业实名购买`

        for(let i=0;i<atteTimes.children.length; i++){
            //e.target[i].classList.remove('atte-active2')
            atteTimes.children[i].classList.remove('atte-active2');
            e.target.classList.add('atte-active2')
        };
    };
})


/**
 * 调用选项卡函数
 */
tabCard('.switch-list li','.switch-cont')
let switchList=document.querySelectorAll('.switch-list li');
let underLineOne=document.querySelector('.under-line0')
let underLineTwo=document.querySelector('.under-line1')
let underLineThree=document.querySelector('.under-line2')
let underLineFour=document.querySelector('.under-line3')

//console.log(switchList);

//获取元素
let experience=document.querySelector('.experience')
let foot=document.querySelector('.foot')

//将体验框和尾部框的在四个页面的bottom距离 获取到并作为对象存入一个数组
let changeBottom=[
    {"exp-bottom":-1250,"foot-bottom":-1230},
    {"exp-bottom":-990,"foot-bottom":-970},
    {"exp-bottom":-840,"foot-bottom":-840},
    {"exp-bottom":-840,"foot-bottom":-840}
]
//console.log(changeBottom[0]["exp-bottom"]);

//此时距离索引和选项卡菜单栏的索引相同 建立关系
 switchList.forEach(function(dom,index){
    dom.addEventListener('click',function(){
       if(this.classList.contains('active2')){//检查元素中是否含有某个类名 返回布尔值
        experience.style.bottom=`${changeBottom[index]["exp-bottom"]}px`
        foot.style.bottom=`${changeBottom[index]["foot-bottom"]}px`
       };
    })
}) 
